<template>
  <div ref="container" class="markdown-body"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { patch } from 'incremental-dom'
import md from '@/utils/markdown'

const container = ref<HTMLElement | null>(null)

// 接收 content 属性
const props = defineProps({
  content: {
    type: String,
    required: true,
  },
})

function render() {
  // const container = document.querySelector('.markdown-body')
  if (!container.value) return

  // 用断言来告诉 TypeScript 这个属性是存在的
  const func = (md as any).renderToIncrementalDOM(props.content)

  patch(container.value as HTMLElement, func)
}

watch(() => props.content, render, { immediate: true })
onMounted(render)
</script>

<style>
/* 自定义样式 */
.markdown-body {
  color: var(--ld-color-text);
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

.markdown-body table {
  width: 100%;
  border-spacing: 0;
  border-radius: 5px;
}

.markdown-body table,
.markdown-body table th,
.markdown-body table td {
  border: 1px solid var(--ld-color-border);
}

.markdown-body table th {
  background-color: var(--ld-color-primary);
  color: var(--ld-color-text);
  padding: 10px;
}

.markdown-body table td {
  padding: 10px;
  color: var(--ld-color-text);
}

.markdown-body table tr:hover {
  background-color: var(--ld-color-bg-hover);
  transition: background-color var(--ld-transition-duration);
}

.markdown-body blockquote {
  border-left: 4px solid var(--ld-color-primary);
  padding: 10px;
  margin: 0;
  background-color: var(--ld-color-bg);
  color: var(--ld-color-text);
}

.markdown-body blockquote p {
  margin: 0;
  padding: 0;
}

.markdown-body blockquote p::before {
  content: '“';
  font-size: 2em;
  line-height: 0;
  margin-right: 10px;
  color: var(--ld-color-primary);
}

.markdown-body blockquote p::after {
  content: '”';
  font-size: 2em;
  line-height: 0;
  margin-left: 10px;
  color: var(--ld-color-primary);
}

.markdown-body code {
  border-radius: 4px;
  background-color: var(--ld-color-primary);
  font-size: 16px;
  line-height: 1.5;
}

.markdown-body pre {
  padding: 10px;
  margin: 0;
  background-color: var(--ld-color-code-bg);
  overflow-x: auto;
  border-radius: 0 0 5px 5px;
}

.markdown-body pre code {
  font-family:
    Fira Code,
    Fira Mono,
    Menlo,
    Consolas,
    DejaVu Sans Mono,
    monospace;
  transition:
    background-color,
    color var(--ld-transition-duration);
  background-color: unset;
}

.markdown-body p {
  width: 100%;
  transition: color var(--ld-transition-duration);
}

.markdown-body ol li::marker,
.markdown-body ul li::marker {
  line-height: 2;
}

/* 代码块样式 */
.code-block {
  outline: 1px solid var(--ld-color-border);
  border-radius: 5px;
}

/* 代码块头部样式 */
.code-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--ld-code-header-bg);
  box-sizing: border-box;
  border-radius: 5px 5px 0 0;
  position: sticky;
  top: 0;
  left: 0;
}

.code-language {
  font-size: 14px;
  font-weight: bold;
  color: var(--ld-color-text);
}

.code-copy-box {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  color: var(--ld-color-text);
  opacity: 0.6;
  transition:
    opacity 0.2s,
    background-color 0.2s;
}
.code-copy-box:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.copy-btn {
  font-size: 14px;
  padding: 0 4px;
}
</style>
